.list {
  padding-left: 1.7em;
  line-height: var(--lineHeightBody);

  @nest ol& {
    list-style-type: decimal-leading-zero;
  }

  @nest ul& {
    list-style-type: none;
  }
}

.item {
  --bulletSize: min(1.2em, 24px);
  --markerGap: var(--spaceS);

  margin-bottom: 0.6em;

  @nest ol &::marker {
    color: rgb(var(--rgbPrimary));
    font-variant-numeric: ordinal;
    font-size: min(1.2em, 16px);
    font-weight: var(--fontWeightMedium);
    font-family: var(--monoFontStack);
  }

  @nest ul &::before {
    content: '';
    position: relative;
    display: inline-block;
    vertical-align: middle;
    left: calc(var(--markerGap) * -1);
    margin-left: calc(var(--bulletSize) * -1);
    width: var(--bulletSize);
    height: var(--bulletSize);
    background-color: rgb(var(--rgbPrimary));
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13.586 12L7.793 6.207l1.414-1.414 6.5 6.5.707.707-.707.707-6.5 6.5-1.414-1.414L13.586 12z"/></svg>');
  }
}
